<template>
  <div>
    <Field
      v-if="showType === 'edit'"
      :border="border"
      :name="name"
      :label="label"
      :labelWidth="labelWidth"
      :disabled="disabled"
      :rules="rules"
      :placeholder="placeholder"
      @click="showPicker = true; currentValueLabel = currentValue; search(currentValue)"
      :readonly="true"
      :value="viewValueFn(viewPickerLabel(currentValue))"
      :is-link="true"
      :arrow-direction="arrow"
    ></Field>
    <Field
      v-else-if="showType === 'view'"
      :border="border"
      :name="name"
      :readonly="true"
      :value="viewValueFn(viewPickerLabel(currentValue))"
      :label="label"
      :labelWidth="labelWidth"
    >
      <template #button>
        <slot></slot>
      </template>
    </Field>
    <!-- 弹窗 -->
    <van-popup v-model="showPicker" position="top">
      <van-picker ref="picker" @confirm="onConfirm" :columns="columns" :default-index="defaultIndex" />
      <div @click.stop>
        <van-search
          left-icon
          v-model="currentValueLabel"
          :placeholder="placeholder"
          @input="search"
        />
        <div class="btn-box">
          <div @click="showPicker = false">取消</div>
          <div @click="fireConfirm">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import common from './item'
import {
  Popup as vanPopup,
  Picker as vanPicker,
  Search as vanSearch
} from 'vant'
export default {
  mixins: [common],
  components: {
    vanPopup,
    vanPicker,
    vanSearch
  },
  data () {
    return {
      showPicker: false,
      defaultIndex: 0,
      valueMap: {},
      pickerType: 'putong'
    }
  },
  computed: {
    columns () {
      let columns = []
      if (this.pickerType === 'putong') {
        columns = this.list.map(o => o.label || o.name || o.value || o.id || o)
      } else {
        columns = this.list
      }
      console.log(columns)
      return columns
    }
  },
  created () {
    if (this.showType === 'view') {
      this.currentValue = this.viewLabel(this.value)
    }
    this.setPickerType()
    // 初始化默认选中项
    let type = this.pickerType
    if (type === 'putong') {
      this.defaultIndex = this.list.findIndex(o => {
        let value =
          'value' in o
            ? o.value
            : 'id' in o
              ? o.id
              : 'label' in o
                ? o.label
                : 'name' in o
                  ? o.name
                  : o
        return value === this.value
      })
    }
  },
  methods: {
    fireConfirm () {
      this.$nextTick(() => this.$refs.picker.confirm())
    },
    onConfirm (label, index) {
      this.confirm(label, index)
      this.showPicker = false
    },
    confirm (label, index) {
      let currentLabel = ''
      let currentValue = ''
      let o = this.list[index]
      currentValue =
        'value' in o
          ? o.value
          : 'id' in o
            ? o.id
            : 'label' in o
              ? o.label
              : 'name' in o
                ? o.name
                : o
      currentLabel =
        'label' in o
          ? o.label
          : 'name' in o
            ? o.name
            : 'value' in o
              ? o.value
              : 'id' in o
                ? o.id
                : o
      this.currentValue = currentLabel
      this.$emit('change', currentValue, this.name, label)
    },
    setPickerType (startItem = this.list[0]) {
      /**
       * 判断popup类型：普通、多列、多级联动
       * 默认普通模式的list类型为：[{value, label}]
       * 多列和多级联动为：[label, label]
       */
      if (startItem.value) {
        this.pickerType = 'putong'
      } else if (startItem.values) {
        this.pickerType = 'duolie'
      } else if (startItem.children) {
        this.pickerType = 'duojiliandong'
      }
    },
    // 多级、多列时的回显
    viewPickerLabel (v) {
      let type = this.pickerType
      let label = ''
      if (type === 'putong') {
        label = this.viewLabel(v)
      } else {
        label = v.join(' / ')
      }
      return label
    },
    search (label) {
      this.confirm(label, 0)
    }
  }
}
</script>

<style lang="css" scoped>
.btn-box {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.btn-box div {
  padding: 10px 30px;
}
</style>
